<template>
  <div class="auth_process">
    <h3><i>1</i>登录新浪微博，进入个人页面，点击菜单管理中心 -> 粉丝服务。</h3>
    <img src="../../../assets/weibo/setting_weibo_1_0416.jpg" alt="" class="process_img">
    <img src="../../../assets/weibo/prevent_menu.png" alt="" class="process_img">
    <img src="../../../assets/weibo/prevent_auto.png" alt="" class="process_img">
    <p><i>关闭</i>自定义菜单和自动回复。</p>
    <h3><i>2</i>开启开发模式，配置服务器信息</h3>
    <img src="../../../assets/weibo/setting_weibo_2_0416.png" alt="" class="process_img">
    <p>1. 选中消息推送服务</p>
    <p>2. 把下列 URL 和 APPKEY 填写到微博服务器配置信息的输入框（可以点击[ 复制 ]按钮复制）；如果以前填写过URL和Token，请点击[ 修改 ] ，再填写以下信息</p>
    <div class="input-wrap">
      <div class="field-tit">URL：</div>
      <div class="field-bd">
        <el-input type="text" v-model="authInfo.url" disabled>
          <el-button slot="append" class="btn-copy" :data-clipboard-text="authInfo.url">复制</el-button>
        </el-input>
      </div>
    </div>
    <div class="input-wrap">
      <div class="field-tit">APPKEY：</div>
      <div class="field-bd">
        <el-input type="text" v-model="authInfo.appKey" disabled>   
          <el-button slot="append" class="btn-copy" :data-clipboard-text="authInfo.appKey">复制</el-button>
        </el-input>
      </div>
    </div>
    <p>3. 点击[ 保存 ]已启用服务器配置</p>
    <h3><i>3</i>保存之后会出现如下信息。</h3>
    <img src="../../../assets/weibo/setting_weibo_20170830.jpeg" alt="" class="process_img">
    <p>将 access_token 填写到下面。如果设置过access_token，请点击右侧[ 修改 ]重新设置</p>
    <div class="input-wrap">
      <div class="field-tit">微博名称：</div>
      <div class="field-bd"><el-input type="text" v-model="appName"></el-input></div>
    </div>
    <div class="input-wrap">
      <div class="field-tit">access-token：</div>
      <div class="field-bd"><el-input type="text" v-model="token"></el-input></div>
    </div>
    <p class="btn-wrap"><el-button type="primary" @click="handleAuth">授权</el-button></p>
  </div>         
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import Clipboard from 'clipboard'
  export default {
    data () {
      return {
        appName: '',
        token: ''
      }
    },
    mounted () {
      this.getWbAuthInfo()
      const clipboard = new Clipboard('.btn-copy')
      clipboard.on('success', () => {
        this.$message.success('复制成功')
      })
    },
    computed: {
      ...mapState({
        authInfo: state => state.weiboManage.authInfo
      })
    },
    methods: {
      ...mapActions('weiboManage', ['getWbAuthInfo', 'commitWbToken']),
      // 授权
      handleAuth () {
        if (!this.appName) {
          this.$message.warning('请输入微博名称')
        } else if (!this.token) {
          this.$message.warning('请输入access-token')
        } else {
          this.commitWbToken({
            appid: this.authInfo.appid,
            appName: this.appName,
            accessToken: this.token
          })
        }
      }
    }
  }
</script>
<style lang="scss">
  .auth_process{
    h3{margin:15px 0;}
    h3 i{display:inline-block;margin-right:10px;width:20px;height:20px;background:#4b0;font-style:normal;text-align:center;color:#fff;}
    .process_img{display:block;margin:0 0 40px 60px;width:600px;}
    p{margin:10px 0 10px 60px;font-size:14px;}
    p i{color:#f00}
    .input-wrap{margin:15px 0 15px 60px;width:480px}
    .field-tit{width:110px;}
    .field-bd{margin-left:115px;}
    .btn-wrap{margin-top:40px;}
  }
</style>
